/** @format */
import { useLayoutEffect, useState } from 'react'
import { Router } from 'react-router-dom'
import type { BrowserRouterProps } from 'react-router-dom'
import type { BrowserHistory } from 'history'

type Props = BrowserRouterProps & {
  history: BrowserHistory
}

// 自定义路由外部跳转
function CustomRouter({ history, ...restProps }: Props) {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  })
  useLayoutEffect(() => history.listen(setState), [history])
  return (
    <Router
      {...restProps}
      navigator={history}
      location={state.location}
      navigationType={state.action}
    />
  )
}

export default CustomRouter
